<template>
  <div class="app-container details repayment-plan-details">
    <el-row :gutter="20">
      <el-col :span="5" class="details-left box-card">
        <el-card>
          <!-- 系统介绍 -->
          <div class="details-left-top details-left-box">
            <!-- 项目才显示图标 -->
            <!-- <i class="el-icon-s-tools"></i> -->
            <div class="top">
              <img src="@/assets/images/u112097.svg" />
              <label v-if="formData.orderTitle"
                >【{{ formData.orderTitle }}】第{{
                  formData.period
                }}期回款计划</label
              >
              <p>
                <dict-drop
                  :options="repayment_status"
                  :value="formData.status"
                />
              </p>
            </div>
          </div>
          <div class="details-left-box">
            <!-- <div class="title">项目资产概况</div> -->
            <div class="cnt">
              <el-row :gutter="24" class="btn-box">
                <el-col :span="20" :offset="2">
                  <el-button
                    class="w-full"
                    type="primary"
                    @click="handleUpdate"
                  >
                    配置回款计划</el-button
                  >
                </el-col>
                <el-col :span="20" :offset="2">
                  <el-button class="w-full" @click="handleAdd"
                    >添加回款记录</el-button
                  >
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19" class="box-card">
        <el-card class="details-right">
          <el-descriptions title="用户信息" :column="2" border>
            <template #title>
              <TitleName
                title="基本信息"
                icon="i-carbon-bookmark-filled"
              ></TitleName>
            </template>
            <el-descriptions-item
              label="计划回款日期"
              label-align="right"
              label-class-name="w-40"
              >{{ formData.repaymentPlanDate }}</el-descriptions-item
            >
            <el-descriptions-item
              label="回款期次"
              label-align="right"
              label-class-name="w-40"
              >第{{ formData.period }}期(共{{
                formData.allPeriod
              }}期)</el-descriptions-item
            >
            <el-descriptions-item label="计划回款金额" label-align="right"
              >¥{{ formData.price }}</el-descriptions-item
            >
            <el-descriptions-item label="已回款金额" label-align="right">
              ¥{{ formData.repaymentPrice }}
            </el-descriptions-item>
            <el-descriptions-item label="未回款金额" label-align="right"
              >¥{{ formData.unRepaymentPrice }}</el-descriptions-item
            >
            <el-descriptions-item label="回款状态" label-align="right">
              <dict-drop
                :options="repayment_status"
                :value="formData.status"
                :isDrop="false"
            /></el-descriptions-item>
            <el-descriptions-item label="逾期天数" label-align="right">{{
              formData.overdueDay
            }}</el-descriptions-item>
            <el-descriptions-item label="关联订单" label-align="right">{{
              formData.orderTitle
            }}</el-descriptions-item>
            <el-descriptions-item label="关联客户" label-align="right">{{
              formData.customerName
            }}</el-descriptions-item>
            <el-descriptions-item label="创建时间" label-align="right">{{
              parseTime(formData.createTime, '{y}-{m}-{d}')
            }}</el-descriptions-item>
            <el-descriptions-item label="更新时间" label-align="right">{{
              parseTime(formData.updateTime, '{y}-{m}-{d}')
            }}</el-descriptions-item>
            <el-descriptions-item label="备注信息" label-align="right">{{
              formData.remark
            }}</el-descriptions-item>
          </el-descriptions>

          <TitleName
            title="回款记录"
            icon="i-carbon-bookmark-filled"
            class="pb-4"
          ></TitleName>
          <el-table
            v-loading="loading"
            :data="formData.repaymentList"
            border
            stripe
          >
            <el-table-column prop="repaymentDate" label="回款日期" width="200">
              <template #default="scope">
                <span>{{
                  parseTime(scope.row.repaymentDate, '{y}-{m}-{d}')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="回款金额" width="200">
              <template #default="scope">
                <span>¥{{ scope.row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="payType" label="付款方式" width="200">
              <template #default="scope">
                <dict-drop :options="pay_type" :value="scope.row.payType" />
              </template>
            </el-table-column>
            <el-table-column prop="settleType" label="结算方式" width="200">
              <template #default="scope">
                <dict-drop
                  :options="settle_type"
                  :value="scope.row.settleType"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="repaymentUserName"
              label="收款人员"
              width="200"
            >
              <template #default="scope">
                <span>{{ scope.row.repaymentUserName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="100">
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="150"
            >
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  icon="View"
                  @click="handleDetails(scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col></el-row
    >
  </div>
</template>
<script setup name="RepaymentPlanDetails">
import { reactive, toRefs, ref, createApp, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  getRepaymentPlan,
  getA8Repayment
} from '@/api/repaymentManage/repayment'
import useTagsViewStore from '@/store/modules/tagsView'
const router = useRouter()
const route = useRoute()
const { proxy, type } = getCurrentInstance()
const formData = ref({
  repaymentList: []
})
const { repayment_status, pay_type, settle_type } = proxy.useDict(
  'repayment_status',
  'pay_type',
  'settle_type'
)

const data = reactive({ loading: false })
let { loading } = toRefs(data)

watchEffect(() => {
  if (route.query.repaymentPlanId) {
    console.log('这是详情！')
    getFormData(route.query.repaymentPlanId)
    // statusForm.value.name = formData.value.name
  }
})
// watch(
//   () => [formData], //[passData.data, data.crudData],
//   (newVal, oldValue) => {
//     statusForm.value.name = formData.value.name
//   },
//   { deep: true }
// )
/** 获取产品详情
 * @param {number}  id 表单id
 */
function getFormData(id) {
  getRepaymentPlan(id).then(res => {
    formData.value = res.data
  })
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}
// 初始化
function init() {
  //   getFormData(route.query.repaymentPlanId)
  //   statusForm.value.name = formData.value.name
}
// 配置回款计划
function handleUpdate() {
  goTo('/financial/repaymentPlanForm', { salesOrderId: formData.value.orderId })
}
//  添加回款记录
function handleAdd() {
  // goTo('/financial/repaymentForm', {
  //   repaymentData: JSON.stringify(formData.value)
  // })
  getA8Repayment(formData.value.orderId).then(() => {
    getFormData(route.query.repaymentPlanId)
  })
}

init()
</script>
<style scoped lang="scss">
@import '@/assets/styles/detailsStyle.scss';
:deep(.label-class) {
  width: 130px;
}
</style>
